<template>
    <div class="search">
      <!--<search-nav :ShowSearchPanel="ShowSearchPanel()"></search-nav>-->

      <search-nav :showSearchPanel="showSearchPanel"/>


      <div class="shop">
        <!--左边-->
        <div class="menu-wrapper">
          <ul>
            <li
              @click="ClickLeftItem(index)"
              class="menu-item"
              :class="{current:index==currentIndex}"
              v-for="(search,index) in searchShopList"
              :key="index"
              ref="menulist"
            >
              <span>{{search.name}}</span>
            </li>
          </ul>
        </div>

        <!--右边-->
        <div class="shop-wrapper">
          <ul ref="shopsParent">
            <li class="shops-li" v-for="(search,index1) in searchShopList" :key="index1">
              <div class="shops-title">
                <h4>{{search.name}}</h4>
                <a href="">查看更多 ></a>
              </div>

              <ul class="phone-type" v-if="search.tag==='phone'">
                <li v-for="(phone,index) in search.category" :key="index">
                  <img :src="phone.icon"/>
                </li>
              </ul>

              <ul class="shops-items" >
                <li v-for="(item,index2) in search.items" :key="index2">
                  <img :src="item.icon"/>
                  <span>{{item.title}}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <search-panel v-if="isShow"  :showSearchPanel="showSearchPanel"></search-panel>
    </div>

</template>

<script>
  import {mapState} from 'vuex'
  import SearchNav from './Children/SearchNav'
  import BScroll  from 'better-scroll'
  import SearchPanel from './Children/SearchPanel'
    export default {
      name: "search",
      data(){
        return{
          scrollY:0,//右侧列表滑动的Y轴坐标
          rightLiTops:[],//所有分类的头部位置
          isShow:false,//设置搜素面板的显示
        }
      },
      components:{
        SearchNav,
        SearchPanel
      },
      computed:{
        ...mapState(['searchShopList']),
        //用于动态决定左侧滑动样式
        currentIndex(){
          //获取data数据
          const {scrollY,rightLiTops} =this;
          //1.2 取出索引
          return rightLiTops.findIndex((liTop,index)=>{
            this._LeftScroll(index)
            return scrollY>=liTop && scrollY<=rightLiTops[index+1]
          })
        }
      },
      mounted(){
        this.$store.dispatch('reqSearchShopList')
      },
      watch:{
        searchShopList(){
          //在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
          this.$nextTick(()=>{
            //1.初始化
            this._initScroll()
            //2.求出所有右边列表头部的位置
            this._initRightLiTops()
          })
        }
      },
      methods:{
        //初始化scroll
        _initScroll(){
          //1.1左边
         this.LeftScroll=new BScroll('.menu-wrapper',{});
          //1.2右边
          this.RightScroll=new BScroll('.shop-wrapper',{
            probeType:3
          })
          //1.3监听滑动事件
          this.RightScroll.on('scroll',(pos)=>{
            this.scrollY=Math.abs(pos.y);
          })
        },

        //求出所有右边列表头部的位置
        _initRightLiTops(){
          //1.2.1  定义临时数组
          var tempArry=[];
          //1.2.2 定义变量，记录高度
          var top=0;
          tempArry.push(top);
          //遍历li标签，取出高度
          let allList=this.$refs.shopsParent.getElementsByClassName('shops-li');//此处是伪数组
          Array.prototype.slice.call(allList).forEach(li=>{
            top+=li.clientHeight;
            tempArry.push(top)
          })
          this.rightLiTops=tempArry
        },

        //点击切换
        ClickLeftItem(index){
          this.scrollY=this.rightLiTops[index+1];
          this.RightScroll.scrollTo(0,-this.scrollY,300);
        },

        //左侧联动,让li绑定滚动
        _LeftScroll(index){
          let menulist=this.$refs.menulist;
          let el=menulist[index];//当前的Li标签
          this.LeftScroll.scrollToElement(el,300,0,-100)
        },

        //设置搜索面板的显示
        showSearchPanel(flag){
          this.isShow=flag
        }
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .search
    width 100%
    height 100%
    background-color f5f5f5
    overflow hidden
    .shop
      display: flex
      position absolute
      top 60px
      bottom 50px
      width 100%
      overflow hidden
      background-color #fff
      .menu-wrapper
        background-color #eee
        width 80px
        flex 0 0 80px
        .menu-item
          width 100%
          height 50px
          display flex
          justify-content center
          align-items center
          font-weight lighter
          color #666
        .current
          color #e02e24 !important
          background-color #fff
        .current::before
          content ''
          background-color #e02e24
          width 4px
          height 30px
          position absolute
          left 0
      .shop-wrapper
        flex 1
        background-color #fff
        .shops-title
          display flex
          flex-direction row
          padding 0 10px
          height 44px
          align-items center
          justify-content space-between
          color: #999
          a
            color #999
            font-weight lighter
            text-decoration  none
        .shops-items
          display flex
          flex-wrap  wrap
          li
            display flex
            flex-direction column
            width 33.3%
            height 90px
            display flex
            justify-content center
            align-items center
            color #666
            font-weight lighter
            font-size 14px
            img
              width 60%
              height 60%
              margin-bottom 5px
         .phone-type
            width 100%
            display flex
            flex-direction row
            flex-wrap wrap
            border-bottom-1px(#ccc)
           .phone-type li
             width 33.3%
             display flex
             justify-content center
             align-items center
             margin 5px 0
             img
                width 70%


</style>
